<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
      body,div{margin:0;padding:0;}
      body{color:#fff;font:16px/1.5;}
      #clock{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
      span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}
    </style>
  </head>
  <body>   
    
    <div id="clock">
      <span></span>点<span></span>分<span></span>秒
    </div>

    <script>
      window.onload = function () {
        var oClock = document.getElementById("clock");  
        var aSpan = oClock.getElementsByTagName("span");
          
        setInterval(getTimes, 1000);
        getTimes();
        function getTimes () {
          var oDate = new Date();
          var aDate = [oDate.getHours(), oDate.getMinutes(), oDate.getSeconds()];
          for (var i in aDate) {
            aSpan[i].innerHTML = aDate[i];
          }
        }
      }
      </script>    
  </body>
</html>